Vue.component('DkWxWalletHeader', {
    props: {
        value: {
            default: '',
            type: String
        },
        textColor: {
            default: '',
            type: String
        },
        bgColor: {
            default: '',
            type: String
        },
        bgImg: {
            default: '',
            type: String
        }
    },
    data() {
        return {
            wallet: {
                all_money: '0.00',
                frozen_money: '0.00',
                money: '0.00'
            },
            withdrawal_money: "0.00",
            showWithdrawal: false
        }
    },
    mounted() {
        this.getUserWallet()
    },
    computed: {
        _style() {
            return {
                color: this.textColor,
                backgroundColor: this.bgColor,
                backgroundImage: this.bgImg !== '' ? 'url(' + this.bgImg + ')' : '',
                zIndex: 999
            }
        }

    },
    methods: {
        handleWithdrawal(action, done) {
            if (action === 'confirm') {
                dk.post('/h5/wallet/userMoneyWithdrawal', {money: this.withdrawal_money}).then(res => {
                    console.log(res)
                    if (res.code === 0) {
                        this.$toast(res.msg)
                        done()
                    } else {
                        this.$toast(res.msg)
                        done(false)
                    }
                })
            } else {
                done()
            }
        },
        getUserWallet() {
            dk.post('/h5/wallet/getUserWallet').then(res => {
                this.wallet = res.data
            })
        },
        handleAllMoney() {
            this.withdrawal_money = this.wallet.money
        }
    },
    template: `
        <div>
            <div class="wallet-header" :style="_style">
              <div class="all-money">
                <div class="title">当前总金额</div>
                <div class="money">￥{{wallet.all_money}}</div>
              </div>
              <div class="other-money">
                <div>
                  <div class="dj-money"><span>冻结金额</span></div>
                  <div class="money">{{wallet.frozen_money}}</div>
                </div>
                <div class="ktx-money" @click="showWithdrawal=true">
                  <div class="title">可提现金额</div>
                  <div class="money">{{wallet.money}}</div>
                </div>
              </div>
            </div>
            <van-dialog :before-close="handleWithdrawal" v-model="showWithdrawal" title="余额提现" show-cancel-button get-container="body" >
                <van-field label="提现金额" v-model="withdrawal_money" name="withdrawal_money" placeholder="提现金额">
                    <template #label><span style="line-height: 33px;">提现金额</span></template>
                    <template #button><van-button size="small" @click="handleAllMoney">全部</van-button></template>
                </van-field>
            </van-dialog>
        </div>
    `
})

Vue.component('DkWxWalletMoneyColor', {
    data() {
        return {}
    },
    props: {
        money: {
            default: "",
            type: String
        }
    },
    template: `
        <span v-if="money>0" style="color: #2DA641">+{{money}}</span>
        <span v-else-if="money==0">{{money}}</span>
        <span v-else="money<0" style="color: #DF4545">{{money}}</span>
    `
})

Vue.component('DkWxWalletLog', {
    data() {
        return {
            list: [],
            loading: false,
            finished: false,
            refreshing: false,
            page: 1,
            size: 5,
            showDetail: false,
            detail: {}
        }
    },
    mounted() {
    },
    methods: {
        getList() {
            dk.post("/h5/wallet/getUserWalletLog", {page: this.page}).then(res => {
                console.log(res)
                for (let i = 0; i < res.data.length; i++) {
                    const element = res.data[i];
                    this.list.push(element);
                }
                this.loading = false;
                this.refreshing = false;
                this.page++
                if (this.list.length >= res.msg || res.data.length === 0) {
                    this.finished = true;
                }
            })
        },
        onLoad() {
            this.getList()
        },
        handleShowDetail(item) {
            console.log(item)
            this.showDetail = true
            this.detail = item
        }
    },
    template: `
        <div>
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <van-cell  v-for="(item,key) in list" :key="key" @click="handleShowDetail(item)">
                    <template #title>
                        {{item.change_desc}}
                    </template>
                    <template #label>
                        {{item.create_time}}
                    </template>
                    <div>
                        <DkWxWalletMoneyColor :money="item.count_money"></DkWxWalletMoneyColor>
                        <p style="font-size: 10px">余额：{{item.after_count_money}}</p>
                    </div>
                </van-cell>
            </van-list>
            <van-dialog v-model="showDetail" title="详情">
                <van-cell-group>
                  <van-cell title="备注" :value="detail.change_desc" ></van-cell>
                  <van-cell>
                    <template #title><p style="line-height: 45px">提现金额</p></template>
                    <DkWxWalletMoneyColor :money="detail.money"></DkWxWalletMoneyColor>
                    <p style="font-size: 10px">余额：{{detail.after_money}}</p>
                  </van-cell>
                  <van-cell>
                    <template #title><p style="line-height: 45px">冻结金额</p></template>
                    <DkWxWalletMoneyColor :money="detail.frozen_money"></DkWxWalletMoneyColor>
                    <p style="font-size: 10px">余额：{{detail.after_frozen_money}}</p>
                  </van-cell>
                  <van-cell title="变动时间" :value="detail.create_time"></van-cell>
                </van-cell-group>
            </van-dialog>
        </div>
    `
})

Vue.component('DkWxWalletWithdrawal', {
    data() {
        return {
            list: [],
            loading: false,
            finished: false,
            refreshing: false,
            page: 1,
            size: 5,
            showDetail: false,
            detail: {}
        }
    },
    mounted() {
    },
    methods: {
        getList() {
            dk.post("/h5/wallet/getUserTransfer", {page: this.page}).then(res => {
                console.log(res)
                for (let i = 0; i < res.data.length; i++) {
                    const element = res.data[i];
                    this.list.push(element);
                }
                this.loading = false;
                this.refreshing = false;
                this.page++
                if (this.list.length >= res.msg || res.data.length === 0) {
                    this.finished = true;
                }
            })
        },
        onLoad() {
            this.getList()
        },
        handleShowDetail(item) {
            this.showDetail = true
            this.detail = item
        }
    },
    template: `
        <div>
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <van-cell  v-for="(item,key) in list" :key="key" @click="handleShowDetail(item)">
                    <template #title>
                        {{item.desc}}
                    </template>
                    <template #label>
                        {{item.create_time}}
                    </template>
                    <div>
                    <p style="line-height: 45px">{{item.money}}</p>
                    </div>
                </van-cell>
            </van-list>
            <van-dialog v-model="showDetail" title="详情">
                <van-cell-group>
                  <van-cell title="打款备注" :value="detail.desc" ></van-cell>
                  <van-cell title="打款金额">
                    <DkWxWalletMoneyColor :money="detail.money"></DkWxWalletMoneyColor>
                  </van-cell>
                  <van-cell title="微信单号" :value="detail.payment_no">
                  </van-cell>
                  <van-cell title="商户单号" :value="detail.partner_trade_no">
                  </van-cell>
                  <van-cell title="打款时间" :value="detail.create_time"></van-cell>
                </van-cell-group>
            </van-dialog>
        </div>

    `
})

Vue.component('DkWxWalletDetailed', {
    props: {},
    data() {
        return {
            active: 0
        }
    },
    mounted() {
    },
    computed: {},
    template: `
  <div class="wallet-detailed">
    <div class="tab">
      <van-tabs v-model="active" sticky>
        <van-tab title="资金明细">
            <DkWxWalletLog></DkWxWalletLog>
        </van-tab>
        <van-tab title="提现记录">
            <DkWxWalletWithdrawal></DkWxWalletWithdrawal>
        </van-tab>
      </van-tabs>
    </div>
  </div>
`
})


